<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D动画：transition过渡和transform转换</title>
		<style>
			/*重难点:
				3D与动画的综合应用。	
			*/
			body{
				perspective: 1000px;
				transform-style: preserve-3d;
				/*perspective-origin: 50% 10%;*/
			}
			div{
				float: left;
				position: absolute;
				width: 150px;
				height: 150px;
				line-height: 150px;
				text-align: center;
			}
			#big-box{
				position: relative;
				float: none;
				width: 500px;
				height: 500px;
				margin: 50px auto;
			}
			
			/*上:粉色*/
			.one1{
				background-color: #FF1493;
				transform:rotateX(90deg);
				/*transform-origin: center bottom;*/
			}
			/*前:红色*/
			.one2{
				background-color: #FF0000;
				transform: translateZ(75px);
			}
			/*下:黑色*/
			.one3{
				background-color: #000000;
				transform: translateY(75px) rotateX(-90deg);
				/*transform-origin: center center;*/
			}
			/*后:紫色*/
			.one4{
				background-color: #6666FF;
				transform: translateZ(75px);
			}
			/*左:橙色*/
			.one5{
				background-color: #FF9900;
				transform: translateX(-75px) rotateY(-90deg);
				/*transform-origin: right center;*/
			}
			/*右:蓝色*/
			.one6{
				background-color: #0099FF;
				transform: translateX(75px) rotateY(90deg);
				/*transform-origin: left center;*/
			}
			
			/*Ms.li
			.one1{
				transform: rotateX(90deg) translateZ(75px);
				background-color:red;
			}
			
			.one3{
				transform: rotateX(-90deg) translateZ(75px);
				background-color: green;
			}
			
			.one5{
				transform: rotateY(-90deg) translateZ(75px);
				background-color:blue;
			}
			
			.one4{
				transform: translateZ(-75px);
				background-color:gray;
			}*/
		</style>
	</head>
	<body>
		<div id="big-box">
			<div class="one3">bottom</div>
			<div class="one4">back</div>
			<div class="one6">right</div>
			<div class="one1">top</div>
			<div class="one5">left</div>
			<div class="one2">front</div>
		</div>
		
		<!--<ul>
            <li class="front">1</li>
            <li class="back">2</li>
            <li class="top">3</li>
            <li class="bottom">4</li>
            <li class="left">5</li>
            <li class="right">6</li>
        </ul>-->
		<!--<div class="bruce flex-ct-x">
		    <div class="td-cube">
		    	<ul>
		            <li class="front">1</li>
		            <li class="back">2</li>
		            <li class="top">3</li>
		            <li class="bottom">4</li>
		            <li class="left">5</li>
		            <li class="right">6</li>
		        </ul>
		    </div>
		</div>-->
	</body>
</html>
